import GpContainer from "@/components/GpContainer";
import GpNavbar from "@/components/GpNavbar";
import { NAVIGATION_BASE_LAYOUT } from "@/hooks/useLayout";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { Switch } from "@taroify/core";
import { Image, Navigator, Text, View } from "@tarojs/components";
import { useState } from "react";
import styles from "./index.module.css";
import { GpTouchableView } from "@/components/GpTouchableView";
import GpFontIcon from "@/components/GpFontIcon";
import clsx from "clsx";
import { pageMapper } from "@/constants/pageMap";
import { useAuthStore } from "@/store";
import GpProtected from "@/components/GpProtected";
import { getMyIntentiondetail, postMyAutojobclose, postMyAutojobopen } from "@/apis/endpoint/my";
import { MemberIntentionResult } from "@/apis/endpoint/model";
import { useImmer } from "use-immer";
import Taro, { useDidShow } from "@tarojs/taro";
import { navigate } from "@/utils/navigation";

export default function Index() {
  const [opacity] = useNavigationOpacity()
  const [navigationHeight, setNavigationHeight] = useState(NAVIGATION_BASE_LAYOUT.navigationHeight + NAVIGATION_BASE_LAYOUT.statusBarHeight)
  const authenticated = useAuthStore(state => state.userInfo?.memberId)
  const [aiSetting, setAiSetting] = useState<INullable<MemberIntentionResult>>(null)
  const [autoJob, setAutoJob] = useImmer({
    opened: false,
    loading: false
  })
  useDidShow(() => {
    getAiSetting()
  })
  function getAiSetting() {
    getMyIntentiondetail().send()
    .then(setting => {
      setAiSetting(setting)
      if (setting) setAutoJob(draft => {draft.opened = setting.isEnableAutomaticJob})
    })
  }
  async function handleAutoJob(checked: boolean) {
    try {
      setAutoJob(draft => {draft.loading = true})
      await (checked ? postMyAutojobopen().send() : postMyAutojobclose().send())
      setAutoJob(draft => {draft.loading = false; draft.opened = checked})
      Taro.showToast({
        title: `自动求职已${checked ? '开启' : '关闭'}`,
        icon: "none"
      })
    } catch (error) {
      setAutoJob(draft => {draft.loading = false})
    }
  }
  function renderEmpty() {
    return (
      <View className="flex flex-col items-center box-border pt-[342px] bg-linear-180 from-0% from-white/0 to-100% to-white h-[calc(100vh-396px)]">
        <View className={styles.emptyTitle}>
          我是小智，您的求职小助理！
        </View>
        <View className="text-center mt-[24px] text-secondary text-[28px] leading-[28px]">
          我可以帮助你自动沟通求职哦！
        </View>
        <GpProtected authFulfilledFn={getAiSetting}>
          <View className="relative mt-[48px] w-[340px] h-[96px] box-border rounded-[16px] overflow-hidden">
            <Image src="/static/images/robot/button-bg.png" className="absolute inset-0 object-cover w-full h-full" />
            <GpTouchableView className="relative w-full h-full box-border flex flex-row justify-center items-center text-white text-[28px] font-bold" onClick={() => {
              navigate(pageMapper.robot.setting)
            }}>
              一键开启  AI找工作
            </GpTouchableView>
          </View>
        </GpProtected>
      </View>
    )
  }
  function renderContent() {
    return (
      <View className="px-[32px] pt-[48px]">
        <View className="mb-[64px]">
          <View className="flex flex-row items-center gap-[12px] mb-[32px]">
            <GpFontIcon name="icon-xiaozhibiaotizhuangshi" className="text-primary" size={32} />
            <Text className="text-[32px] leading-[32px] font-bold text-primary">今日沟通</Text>
          </View>
          <View className="bg-white rounded-[24px] overflow-hidden shadow-[0_4px_40px_rgba(46,41,77,0.06)]">
            <View className="relative w-full h-[160px]">
              <Image src="/static/images/robot/robot-block-bg.png" className="absolute inset-0 object-cover w-full h-[160px]" />
              <View className="absolute inset-0 box-border flex flex-row justify-center gap-[126px] pt-[56px]">
                <View className="flex flex-col items-center gap-[16px]">
                  <Text className="text-primary text-[48px] leading-[48px] font-bold">121</Text>
                  <Text className="text-primary text-[24px] leading-[24px]">AI打招呼</Text>
                </View>
                <View className="flex flex-col items-center gap-[16px]">
                  <Text className="text-theme text-[48px] leading-[48px] font-bold">21</Text>
                  <Text className="text-primary text-[24px] leading-[24px]">有效沟通</Text>
                </View>
                <View className="flex flex-col items-center gap-[16px]">
                  <Text className="text-[#0DAF7B] text-[48px] leading-[48px] font-bold">12</Text>
                  <Text className="text-primary text-[24px] leading-[24px]">匹配成功</Text>
                </View>
              </View>
            </View>
            <View className="w-full h-[132px] flex flex-row justify-center items-center gap-[22px]">
              <Navigator url={'/' + pageMapper.robot.aiknowns} className="w-[304px] h-[80px] flex flex-row justify-center items-center bg-theme/4 rounded-[16px] gap-[12px]">
                <GpFontIcon name="icon-AIzhishiku" size={32} className="text-secondary" />
                <Text className="text-[28px] text-secondary">AI知识库</Text>
              </Navigator>
              <Navigator url={'/' + pageMapper.robot.setting} className="w-[304px] h-[80px] flex flex-row justify-center items-center bg-theme/4 rounded-[16px] gap-[12px]">
                <GpFontIcon name="icon-AIgoutongpeizhi" size={32} className="text-secondary" />
                <Text className="text-[28px] text-secondary">AI沟通配置</Text>
              </Navigator>
            </View>
          </View>
        </View>
        <View className="mb-[64px]">
          <View className="flex flex-row items-center gap-[12px] mb-[32px]">
            <GpFontIcon name="icon-xiaozhibiaotizhuangshi" className="text-primary" size={32} />
            <Text className="text-[32px] leading-[32px] font-bold text-primary">AI沟通记录</Text>
          </View>
          <View className="bg-white rounded-[24px] overflow-hidden shadow-[0_0_32px_rgba(46,41,77,0.08)] px-[28px]">
            <View className="flex flex-row items-center gap-[48px] pt-[48px] pb-[40px]">
              <View className="text-theme text-[28px] font-bold">全部</View>
              <View className="text-third text-[28px]">待介入</View>
              <View className="text-third text-[28px]">匹配成功</View>
              <View className="text-third text-[28px]">不合适</View>
            </View>
            <View className="flex flex-col gap-[18px]">
              <View className="flex flex-row items-center box-border h-[136px] rounded-[16px] bg-theme/4 px-[24px]">
                <View className="text-secondary text-[24px] leading-[24px] flex-none mr-[24px]">
                  09:20
                </View>
                <View className="w-0 flex-1 flex flex-col justify-center gap-[14px]">
                  <Text className="text-primary text-[30px] leading-[30px] font-medium">产品经理</Text>
                  <Text className="text-third text-[28px] leading-[28px] truncate">广州冠鹏信息技术有限公司</Text>
                </View>
                <View className={clsx("flex-none ml-[14px] flex flex-row items-center justify-center gap-[8px] px-[16px] h-[48px] rounded-[24px]", "bg-[#0DAF7B]/10 text-[#0DAF7B]", "bg-theme/10 text-theme", "bg-[#F53F3F]/10 text-[#F53F3F]")}>
                  <GpFontIcon name="icon-xiaozhibiaotizhuangshi" className="text-inherit" size={24} />
                  <Text className="text-[24px] font-medium">匹配成功</Text>
                  {/* 待介入 */}
                  {/* 不合适 */}
                </View>
              </View>
            </View>
            <View className="py-[48px] box-border flex justify-center">
              <Navigator className="text-theme text-[28px] leading-[28px]">
                {"查看全部 >>"}
              </Navigator>
            </View>
          </View>
        </View>
        <View className="mb-[64px]">
          <View className="flex flex-row items-center gap-[12px] mb-[32px]">
            <GpFontIcon name="icon-xiaozhibiaotizhuangshi" className="text-primary" size={32} />
            <Text className="text-[32px] leading-[32px] font-bold text-primary">AI效果分析</Text>
          </View>
          <View className="bg-white rounded-[24px] overflow-hidden shadow-[0_0_32px_rgba(46,41,77,0.08)] p-[28px]">
            <View className="grid grid-cols-3 gap-[16px]">
              <View className="bg-theme/4 rounded-[16px] h-[176px] py-[32px] px-[24px]">
                <View className="text-[#496EA9] text-[24px] leading-[24px]">已沟通城市</View>
                <View className="text-theme text-[40px] leading-[40px] font-bold mt-[12px] mb-[14px]">318</View>
                <View className="text-[22px] leading-[22px] text-[#FD9900]">高于人工415%</View>
              </View>
              <View className="bg-theme/4 rounded-[16px] h-[176px] py-[32px] px-[24px]">
                <View className="text-[#496EA9] text-[24px] leading-[24px]">获得机会</View>
                <View className="text-theme text-[40px] leading-[40px] font-bold mt-[12px] mb-[14px]">88</View>
                <View className="text-[22px] leading-[22px] text-[#FD9900]">高于人工15%</View>
              </View>
              <View className="bg-theme/4 rounded-[16px] h-[176px] py-[32px] px-[24px]">
                <View className="text-[#496EA9] text-[24px] leading-[24px]">节省时间</View>
                <View className="text-theme text-[40px] leading-[40px] font-bold mt-[12px] mb-[14px]">56</View>
                <View className="text-[22px] leading-[22px] text-[#FD9900]">等于18个工作日</View>
              </View>
            </View>
            {/* TODO: 曲线图 */}
          </View>
        </View>
        <View className="mb-[64px]">
          <View className="flex flex-row items-center gap-[12px] mb-[32px]">
            <GpFontIcon name="icon-xiaozhibiaotizhuangshi" className="text-primary" size={32} />
            <Text className="text-[32px] leading-[32px] font-bold text-primary">AI优化建议</Text>
          </View>
          <View className="bg-white rounded-[24px] overflow-hidden shadow-[0_0_32px_rgba(46,41,77,0.08)] px-[28px] py-[48px]">
            <View className="flex flex-col gap-[64px]">
              <View className="flex flex-row items-center gap-[24px]">
                <View className="flex flex-row justify-center items-center rounded-[50%] size-[80px] border-solid border-[16px] border-theme/10 flex-none">
                  <Image src="/static/images/robot/condition.png" className="w-[32px]" mode="widthFix" />
                </View>
                <View className="flex-1 w-0 flex-col gap-[8px] justify-center">
                  <Text className="text-primary text-[28px] font-medium leading-[28px]">期望条件</Text>
                  <Text className="text-third text-[24px] leading-[28px] truncate">
                    有<Text className="text-[#FD9900]">3</Text>个条件放宽配置，可提升15%面试机会！
                  </Text>
                </View>
              </View>
              <View className="flex flex-row items-center gap-[24px]">
                <View className="flex flex-row justify-center items-center rounded-[50%] size-[80px] border-solid border-[16px] border-theme/10 flex-none">
                  <Image src="/static/images/robot/aiknowns.png" className="w-[32px]" mode="widthFix" />
                </View>
                <View className="flex-1 w-0 flex-col gap-[8px] justify-center">
                  <Text className="text-primary text-[28px] font-medium leading-[28px]">AI知识库</Text>
                  <Text className="text-third text-[24px] leading-[28px] truncate">
                    有<Text className="text-[#FD9900]">3</Text>个问题可配置知识车，让AI回复更高效！
                  </Text>
                </View>
              </View>
              <View className="flex flex-row items-center gap-[24px]">
                <View className="flex flex-row justify-center items-center rounded-[50%] size-[80px] border-solid border-[16px] border-theme/10 flex-none">
                  <Image src="/static/images/robot/resume.png" className="w-[32px]" mode="widthFix" />
                </View>
                <View className="flex-1 w-0 flex-col gap-[8px] justify-center">
                  <Text className="text-primary text-[28px] font-medium leading-[28px]">求职简历</Text>
                  <Text className="text-third text-[24px] leading-[28px] truncate">
                    你的简历还有<Text className="text-[#FD9900]">3</Text>点待优化，可提升23%面试机会！
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  return <GpContainer className="bg-[#E7F1FB]">
    <GpNavbar
      navigationBarTitleText="小智"
      navigationBarPlaceholder={false}
      navigationBarBackgroundColor={`rgba(255, 255, 255, ${opacity})`}
      onLayout={({statusBarHeight, navigationHeight}) => setNavigationHeight(statusBarHeight + navigationHeight)}
    />
    <View className="relative w-full h-[396px] box-border">
        <Image src="/static/images/common/home-bg.png" className="w-full absolute left-0 top-0 z-0" mode="widthFix" />
        <View className="absolute inset-0 px-[32px]" style={{paddingTop: `${navigationHeight}px`}}>
          <View className="flex flex-row items-center gap-[20px] mt-[24px]">
            <Image src="/static/images/robot/robot-female.png" className="w-[112px]" mode="widthFix" />
            <View className="flex flex-col justify-center gap-[12px]">
              <View className="font-bold">
                <Text className="text-primary text-[36px] leading-[36px]">小智待开启{/* 小智求职中 */}</Text>
                <Text className="text-[#496EA9] text-[32px] leading-[32px]">
                  (<Text className="text-theme">0</Text>/100)
                </Text>
              </View>
              <Text className="text-[#496EA9] text-[24px] leading-[24px]">10+家公司待沟通{/* 运行中 - 正在与8家公司沟通 */}</Text>
            </View>
            <Switch size={24} loading={false} className="ml-auto" checked={autoJob.opened} onChange={handleAutoJob} />
          </View>
          <View className="h-[16px] bg-theme/10 rounded-[12px] mt-[30px]">
            {/* TODO */}
          </View>
        </View>
      </View>
      {authenticated && aiSetting ? renderContent() : renderEmpty()}
  </GpContainer>
}
